const nav = new Vue({
    el: '.nav',
    data: {
        actives: 0,
        list: [
            { id: 1, name: '热门' },
            { id: 2, name: '最新' },
            { id: 3, name: '精选' }
        ]
    }
});

const updateDisplay = () => {
    // 先全部添加隐藏类名
    document.querySelector('.content').classList.add('dsn');
    document.querySelector('.contday').classList.add('dsn');
    document.querySelector('.contbor').classList.add('dsn');

    switch (nav.actives) {
        case 0: // 热门
            document.querySelector('.content').classList.remove('dsn');
            break;
        case 1: // 最新
            document.querySelector('.contday').classList.remove('dsn');
            break;
        case 2: // 精选
            document.querySelector('.contbor').classList.remove('dsn');
            break;
    }
};

const content = new Vue({
    el: '.content',
    data: {
        list: []
    },
    async created() {
        let response1 = await axios.get('http://localhost:3888/energy');
        let response2 = await axios.get('http://localhost:3888/essay');
        let response3 = await axios.get('http://localhost:3888/hot');
        this.list = response1.data.concat(response2.data).concat(response3.data);

        // 调用去重函数，去除name属性相同的数据
        this.list = this.removeDuplicatesByName(this.list);

        // 调用排序函数，按照browsesort属性从小到大排序
        this.list = this.sortByBrowsesort(this.list);

        // 初始化时根据默认的actives值更新显示
        updateDisplay();
    },
    methods: {
        removeDuplicatesByName(arr) {
            const uniqueNames = [];
            const result = [];
            for (const item of arr) {
                if (!uniqueNames.includes(item.name)) {
                    uniqueNames.push(item.name);
                    result.push(item);
                }
            }
            return result;
        },
        sortByBrowsesort(arr) {
            return arr.sort((a, b) => {
                const numA = Number(a.browsesort);
                const numB = Number(b.browsesort);
                return numA - numB;
            });
        }
    }
});

const contday = new Vue({
    el: '.contday',
    data: {
        list: []
    },
    async created() {
        let response1 = await axios.get('http://localhost:3888/energy');
        let response2 = await axios.get('http://localhost:3888/essay');
        let response3 = await axios.get('http://localhost:3888/hot');
        this.list = response1.data.concat(response2.data).concat(response3.data);

        // 调用去重函数，去除name属性相同的数据
        this.list = this.removeDuplicatesByName(this.list);

        // 调用排序函数，按照time属性与2025-01-07的接近程度排序
        this.list = this.sortByTime(this.list);

        // 初始化时根据默认的actives值更新显示
        updateDisplay();
    },
    methods: {
        removeDuplicatesByName(arr) {
            const uniqueNames = [];
            const result = [];
            for (const item of arr) {
                if (!uniqueNames.includes(item.name)) {
                    uniqueNames.push(item.name);
                    result.push(item);
                }
            }
            return result;
        },
        sortByTime(arr) {
            const targetDate = new Date('2025-01-07');
            return arr.sort((a, b) => {
                const dateA = new Date(a.time);
                const dateB = new Date(b.time);
                return Math.abs(dateA - targetDate) - Math.abs(dateB - targetDate);
            });
        }
    }
});

const contbor = new Vue({
    el: '.contbor',
    data: {
        list: []
    },
    async created() {
        let response1 = await axios.get('http://localhost:3888/energy');
        let response2 = await axios.get('http://localhost:3888/essay');
        let response3 = await axios.get('http://localhost:3888/hot');
        this.list = response1.data.concat(response2.data).concat(response3.data);

        // 调用去重函数，去除name属性相同的数据
        this.list = this.removeDuplicatesByName(this.list);

        // 调用排序函数，按照browsessort属性从小到大排序
        this.list = this.sortByBrowsessort(this.list);

        // 初始化时根据默认的actives值更新显示
        updateDisplay();
    },
    methods: {
        removeDuplicatesByName(arr) {
            const uniqueNames = [];
            const result = [];
            for (const item of arr) {
                if (!uniqueNames.includes(item.name)) {
                    uniqueNames.push(item.name);
                    result.push(item);
                }
            }
            return result;
        },
        sortByBrowsessort(arr) {
            return arr.sort((a, b) => {
                const numA = Number(a.browsessort);
                const numB = Number(b.browsessort);
                return numA - numB;
            });
        }
    }
});

// 监听nav实例中actives的变化，变化时更新显示
nav.$watch('actives', updateDisplay);